<script setup lang='ts'>
import WangEditorComponent from '@/components/RichText/richtext.vue';
import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { getMessage, editMessage, uploadFile, deleteFile } from '@/api/message'
import { message } from '@/utils/message';
import { mainUrl } from '@/api/utils';
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
const extensions = [javascript(), oneDark];
const route = useRoute();
const router=useRouter();
const title = ref('');
const content = ref('');
const htmlcontent = ref('');
const message_type = ref('')
const selectedFileName = ref(null);
const fileData=ref([]);
const wangEditor=ref(null);
const saveMessage = async () => {
  let data = {};
  if (wangEditor.value!=null) {
    data = {
      title: title.value,
      content: wangEditor.value.valueHtml,
      message_id: route.query.message_id,
      message_type: message_type.value
    }
  } else {
    data = {
      title: title.value,
      content: htmlcontent.value,
      message_id: route.query.message_id,
      message_type: message_type.value
    }
  }
  
  let res = await editMessage(data);
  console.log('保存消息', res);
  if (res.data.code == 200) {
    message('保存成功', { type: 'success' });
    router.back()
    
  }
}
const loading=ref(false)
const onFileSelected=(event)=> {
  const file = event.target.files[0];
  if (file) {
    selectedFileName.value = file.name; // 显示文件名
    loading.value=true
    uploadFile({file:file,message_id:route.query.message_id}).then((res)=>{
      console.log('上传文件',res)
      if(res.data.code==200){
        message('上传成功', { type: 'success' });
        loading.value=false
        selectedFileName.value = null;
        getMessage(route.query.message_id).then((res) => {
          fileData.value = res.data.data.attachments
        });
       
       
      }
    })
  } else {
    selectedFileName.value = null; // 如果用户取消选择，清空文件名
  }
}

onMounted(() => {
  getList()
})
const getList = async () => {
  let res = await getMessage(route.query.message_id);
  console.log('消息', res);
  title.value = res.data.data.title;
  content.value = res.data.data.content;
  htmlcontent.value = res.data.data.content;
  message_type.value = res.data.data.message_type;
  fileData.value = res.data.data.attachments
}
//删除附件
const deletefile = async (id) => {
  let res = await deleteFile(id);
  if (res.data.code == 200) {
    getList();
    message('删除成功', { type: 'success' });
  }
}
const richORnomal = ref(true);
const changetype = () => {
  richORnomal.value = !richORnomal.value;
}

</script>

<template>
  <div>
    <input v-model="title" style="width:100%;height:45px;border:none;margin-bottom: 10px;
    background-color: transparent;
    border-bottom: 1px solid #ccc;
    font-size: 23px;" size="large" placeholder="请输入标题" />
    <WangEditorComponent v-if="richORnomal" ref="wangEditor" v-model:valueHtml="content"></WangEditorComponent>
    <codemirror v-if="!richORnomal" v-model="htmlcontent" simple placeholder="Code gose here..."
      :style="{ height: '550px', width: '100%' }" :extensions="extensions" />
    <el-button style="margin-top: 10px" plain type="primary" @click="changetype">{{ richORnomal ? '切换代码编辑器' : '切换富文本编辑器'
      }}</el-button>
    <label class="custom-file-upload">
      <div style="display: flex;align-items: center">
        <div v-loading="loading">
          <el-button class="btn" @click="$refs.fileInput.click()">上传附件</el-button>
          <input type="file" ref="fileInput" @change="onFileSelected" style="display:none" />
          <span v-if="selectedFileName" class="file-name">{{ selectedFileName }}</span>
        </div>
      </div>
    </label>
    <div class="table_box">
      <el-table class="table_el" :data="fileData" style="width: auto">
        <el-table-column label="文件名" prop="title" show-overflow-tooltip />
        <el-table-column label="创建时间" prop="created_at" show-overflow-tooltip />
        <el-table-column width="200" label="操作">
          <template #default="scope">
            <el-button size="small">
              <a :href="`${mainUrl}/v1/attachment/get_attachment?aid=${scope.row.attachment_id}`" download>下载</a>
            </el-button>
            <el-button size="small" type="danger" @click="deletefile(scope.row.attachment_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 20px;">
      <el-button type="primary" size="large" @click="saveMessage()">保存</el-button>
      <el-button size="large" @click="router.back()">取消</el-button>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.custom-file-upload {
  position: relative;
  overflow: hidden;
}

.btn {
  display: inline-block;
  margin-top: 10px;
}

.file-name {
  margin-left:0 10px;
  color: #333;
}
</style>
